<template>
  <div>
    <div style="margin-top: 15px; width: 450px">
      <el-input placeholder="请输入档案号/姓名/电话" v-model="tankai">
        <el-button
          slot="append"
          type="primary"
          icon="el-icon-search"
          @click="onSubmit"
          >搜索</el-button
        >
      </el-input>
    </div>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="memberexamination.examDate" label="体检日期" width="180">

      </el-table-column>
      <el-table-column prop="filenumber" label="档案号" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="phonenumber" label="手机号码" width="180">
      </el-table-column>
      <el-table-column  label="检测套餐" width="180">
           <template slot-scope="scope">
            <el-link @click.prevent="tkxq(scope.$index,scope.row)">详情</el-link>
            </template>
      </el-table-column>
      <el-table-column prop="order.orderstatus" label="报告状态" width="180" :formatter="formatteraa">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index,scope.row)">上传报告</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[10, 20, 50]"
        :page-size="num"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      > 
      </el-pagination>
    </div>
    <!--编辑或者添加的模态框-->
    <el-dialog title="编辑员工信息" :visible.sync="dialogFormVisible">
      <el-form :model="upfrom">
          <el-form-item label="体检日期" prop="examDate">
            <el-date-picker type="date" placeholder="选择日期" v-model="upfrom.examDate" style="width: 100%"></el-date-picker>
          </el-form-item>
          <el-form-item label="档案号" prop="filenumber">
            <el-input v-model="upfrom.filenumber"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="mname">
            <el-input v-model="upfrom.mname"></el-input>
          </el-form-item>
                    <el-form-item label="文件上传">
                      <el-upload
        style="width: 30%;"
      action="/rear/tankaiUp"
      ref="upload"
      :data="order" 
      name="pictureFile"
      multiple
      :on-success="upsuccess"
      list-type="picture-card"
      :auto-upload="false"
    >
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{ file }" >
        <img class="el-upload-list__item-thumbnail" :src="file.url" />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <i class="el-icon-download"></i>
          </span>
          <span
            v-if="!disabled "
            class="el-upload-list__item-delete"
            @click="handleRemove(file, this)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>
                    </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUpload">确 定</el-button>
      </div>
    </el-dialog>



    <el-dialog title="温馨提示" :visible.sync="visible" width="60%">
      <span>确认要删除{{ upfrom.id }}嘛？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="del">确 定</el-button>
      </span>
    </el-dialog>



    <el-dialog title="详情" :visible.sync="xqvisible" width="40%">

<el-table
                :data="setmeal"
                height="350"
                stripe
                style="width: 700px"
              >
                <el-table-column prop="name" label="套餐名称" width="180">
                </el-table-column>
                <el-table-column prop="sex" label="适用性别" width="100">
                  <template slot-scope="scope">
                    {{
                      scope.row.sex == 1
                        ? "适用男性"
                        : scope.row.sex == 2
                        ? "男女不限"
                        : "适用女性"
                    }}
                  </template>
                </el-table-column>
                <el-table-column prop="price" label="套餐价格" width="100">
                </el-table-column>
                <el-table-column prop="remark" label="套餐介绍">
                </el-table-column>
              </el-table>

                
                </el-dialog>


  </div>
</template>

<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
  
  <script>
export default {
  methods: {
    tkxq(index,row){
      this.xqvisible=true;
      this.axios
        .get("/rear/selectByP", {
          params: {
            id: row.id,
          },
        })
        .then((req) => {
          this.setmeal = req.data;
        });
    },
     upsuccess(response, file) {
      this.$notify({
        title: '成功',
        message: file.name + '套餐保存成功！',
        type: 'success',
      });
      this.info();
      this.dialogFormVisible=false;
    },
    submitUpload() {
          this.$refs.upload.submit();
    },
    handleRemove(file) {
      this.$refs.upload.handleRemove(file)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
    },
    handleDownload(file) {
      console.log(file);
    },
     formatteraa: function (row, column, cellvalue) {
      if (cellvalue == 0) {
        return "未预约";
      } else if (cellvalue == 1) {
        return "待预约";
      }else if (cellvalue == 2) {
        return "已预约";
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    handleEdit(index,row) {
      this.order.membeid=row.id;

      this.upfrom.id = row.id;
      this.upfrom.examDate = row.memberexamination.examDate;
      this.upfrom.orderstatus = row.orderstatus;
      this.upfrom.memberid= row.memberid;
      this.upfrom.mname = row.name;
      this.upfrom.filenumber = row.filenumber;
      this.upfrom.phonenumber = row.phonenumber;
      this.dialogFormVisible = true;
    },
    handleDelete(index, row) {
      this.visible = true;
      this.memberexamination.id = row.id;
      this.memberexamination.name = row.name;
    },


    info() {
      this.axios
        .get("/rear/tkpagememb", {
          params: {
            page: this.page,
            num: this.num,
            tankai: this.tankai,
          },
        })
        .then((req) => {
                 this.tableData = req.data.rows;
          this.total = req.data.total;
        });
    },



    handleSizeChange(val) {
      this.num = val;
      this.info();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.info();
    },
    onSubmit() {
       this.info();
    },
    submitForm() {
        let params= {
          id:this.upfrom.id,
          examDate:this.upfrom.examDate,
          setmeal:{
              name:this.upfrom.sname
          },
          memberid:this.upfrom.memberid,
          setmealid:this.upfrom.setmealid,
          member:{
            name:this.upfrom.mname,
            filenumber:this.upfrom.filenumber,
            phonenumber:this.upfrom.phonenumber,
          },
          order:{
            orderstatus:this.upfrom.orderstatus
          }
        }
          this.axios
            .post("/rear/tkupdememb",params )
            .then((req) => {
                this.info();
               this.dialogVisible = false;
            })
            .catch(() => {
             // loading.close();
            });
    
      },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    del() {
      const loading = this.$loading({
        lock: true,
        text: "正在删除中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.2)",
      });
      this.axios
        .get("/rear/tkdelmemb", { params: this.memberexamination })
        .then((req) => {
          if (req.data > 0) {
            loading.close();
            this.visible = false;
            this.info();
          } else {
            loading.close();
          }
        })
        .catch(() => {
          loading.close();
        });
    },
  },
  data() {
    return {
      reportstatus:"",
      xqvisible:false,
      setmeal:[],
      dialogFormVisible:false,
      visible: false,
      dialogVisible: false,
      page: 1,
      num: 10,
      total: null,
      tableData:[],
      name: null,
      phonenumber: null,
      disabled:false,
      order:{memberid:null},
      memberexamination: {
        id: "",
        examDate: "",
        name: "",
        phonenumber: "",
        orderstatus:"",
      },
      upfrom:{
        id: "",
        examDate: "",
        filenumber:'',
        mname: "",
        phonenumber: "",
        memberid:'',
        setmealid:'',
        sname:"",
        orderstatus:0,
      },
      tankai: "",
    };
  },
  created() {
    this.info();
  },
};
</script>